
import React, { Component } from "react";
import Taro from "@tarojs/taro";
import { View, Text, Image, ScrollView } from "@tarojs/components";
import {
    MONTY_DATA,
    MONTY_TITLE,
    CHECK_RIDIO_Y,
    CHECK_RIDIO
} from ".../constants";
import "./index.scss";
import { getGlobalData, getStorageData } from "@utils";
import { SafeAreaView, StatusBar } from "@components";

export default class HouseLoanComputeMontylyPayments extends Component {
    page = 1;
    total;

    constructor(props) {
        super(props);
        this.state = {
            checked: "equalInterest",
            equalInterest: {},
            equalPrincipal: {},
            equalInterestMonthList: [],
            interestList: [],
            assessInfo: null,
            equalPrincipalMonthList: [],
            principalList: [],
            tip: "",
            loanAmount: 0
        };
    }

    async componentDidMount() {
        const params = getGlobalData("COMPUTE_RESULT") || {};
        this.init(params);
        const { type = "equalInterest" } =
            (await getStorageData("USER_LOAN_WAY")) || {};
        this.setState({
            checked: type
        });
    }

    init = async (data = {}) => {
        try {
            const {
                equalInterestMonthList = [],
                equalPrincipalMonthList = []
            } = data;
            this.total = Math.floor(equalInterestMonthList.length / 10);
            this.setState({
                interestList: equalInterestMonthList.slice(0, 10),
                principalList: equalPrincipalMonthList.slice(0, 10),
                ...data
            });
        } catch (error) {
            console.log(error);
        }
    };

    seleceFirst = (data) => async () => {
        await Taro.setStorage({ key: "USER_LOAN_WAY", data });
        this.setState(
            {
                checked: data.type
            },
            () => {
                Taro.showToast({
                    title: `月供将以${data.title}的形式展示`,
                    icon: "none"
                });
            }
        );
    };

    onScrollToLower = () => {
        if (this.page >= this.total) return;
        this.page++;
        const { equalInterestMonthList, equalPrincipalMonthList } = this.state;
        this.setState({
            interestList: equalInterestMonthList.slice(0, this.page * 10),
            principalList: equalPrincipalMonthList.slice(0, this.page * 10)
        });
    };

    render() {
        const {
            checked,
            interestList,
            principalList,
            loanAmount,
            tip
        } = this.state;
        return (
            <SafeAreaView className="montyly-payments">
                <StatusBar backgroundColor="#fff" barStyle="dark-content" />
                <ScrollView
                    className="scroll-content"
                    scrollY
                    enableBackToTop
                    onScrollToLower={this.onScrollToLower}
                >
                    <View className="content">
                        <View className="title">
                            <Text className="title-text">贷款总额</Text>
                            <Text className="title-amount">{loanAmount}</Text>
                            <Text className="title-text">万</Text>
                        </View>
                        <Text className="tip-info">{tip}</Text>

                        <View className="compared">
                            {MONTY_DATA.map((item) => {
                                return (
                                    <View className="equal-box" key={item.type}>
                                        <Text className="equal-box-title">{item.title}</Text>
                                        <View className="equal-box-wrap">
                                            <Text className="equal-box-wrap-title">
                                                {MONTY_TITLE[item.type]}
                                            </Text>
                                            <Text className="amount">
                                                {this.state[item.type].payMonth}
                                            </Text>
                                        </View>
                                        <View className="equal-box-wrap">
                                            <Text className="equal-box-wrap-title">
                                                利息总额（万元）
                                            </Text>
                                            <Text className="amount">
                                                {this.state[item.type].totalInterest}
                                            </Text>
                                        </View>
                                        <View className="equal-box-wrap">
                                            <Text className="equal-box-wrap-title">特点</Text>
                                            <Text className="advant">
                                                {item.type !== "equalPrincipal"
                                                    ? "每月月供稳定"
                                                    : `每月递减${this.state[item.type].monthDecline}元`}
                                            </Text>
                                        </View>
                                        <View
                                            className="equal-box-wrap btn-wrap"
                                            onClick={this.seleceFirst(item)}
                                        >
                                            <Image
                                                className="radio"
                                                src={
                                                    item.type === checked ? CHECK_RIDIO_Y : CHECK_RIDIO
                                                }
                                            />
                                            <Text className="btn-wrap-text">优先看{item.title}</Text>
                                        </View>
                                    </View>
                                );
                            })}
                        </View>

                        <View className="pay-monty">
                            <Text className="pay-monty-title">还款细则</Text>
                            <View className="line line-first">
                                <Text className="line-text line-monty" />
                                <Text className="line-text line-amount line-first-title">
                                    等额本息
                                </Text>
                                <Text className="line-text line-amount line-first-title">
                                    等额本金
                                </Text>
                            </View>
                            {interestList.map((item, index) => {
                                return (
                                    <View
                                        key={index + ""}
                                        className={`line ${index % 2 === 0 ? "line-even" : "line-odd"
                                            }`}
                                    >
                                        <Text className="line-text line-monty">
                                            第{index + 1}个月
                                        </Text>
                                        <Text className="line-text line-amount">￥{item}</Text>
                                        <Text className="line-text line-amount">
                                            ￥{principalList[index]}
                                        </Text>
                                    </View>
                                );
                            })}
                        </View>
                    </View>
                </ScrollView>
            </SafeAreaView>
        );
    }
}
